import styled from "@emotion/styled";
import { PageHeader } from "./PageHeader";
import { Route, Routes } from "react-router";
import { Navigate } from "react-router-dom";
import { ProjectDrawer } from "../screens/projectList/ProjectDrawer";
import React, { Suspense } from "react";
import { FullPageLoading } from "../components/lib";
const ProjectListScreen = React.lazy(() => import("../screens/projectList"));
const ProjectScreen = React.lazy(() => import("../screens/project"));

const AuthenicatedApp = () => {
  return (
    <Container>
      <PageHeader />
      <Main>
        <Suspense fallback={<FullPageLoading />}>
          <Routes>
            <Route path={"/"} element={<Navigate to="projects" />} />
            <Route path={"/projects"} element={<ProjectListScreen />} />
            <Route
              path={"/projects/:projectId/*"}
              element={<ProjectScreen />}
            />
          </Routes>
        </Suspense>
      </Main>
      <ProjectDrawer />
    </Container>
  );
};
export default AuthenicatedApp;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
`;

const Main = styled.main`
  flex: 1;
  display: flex;
  width: 100%;
  overflow: hidden;
`;
